<template>
  <div class="modelListDrawer-container" :class="[visible ? 'show' : 'hide']">
    <div class="modelListDrawer-body">
      <div class="header">
        模型列表<a-icon type="close" @click="handleClose()" />
      </div>
      <div class="body">
        <div class="search-condition">
          <a-input-search
            v-model.trim="keyWord"
            @search="filterTreeData()"
            style="width: 100%"
            placeholder="请输入关键字"
          />
        </div>
        <div class="tree-container">
          <a-spin :spinning="spinning">
            <a-empty v-if="treeData.length == 0" :description="false" />
            <!-- -->
            <a-tree
              v-else
              v-model="checkedKeys"
              checkable
              show-icon
              :expanded-keys="expandedKeys"
              :auto-expand-parent="autoExpandParent"
              :selected-keys="selectedKeys"
              :tree-data="treeData"
              @expand="onExpand"
              @select="onSelect"
              @check="onCheck"
              :load-data="onLoadData"
              :replaceFields="{
                children: 'subNodes',
                title: 'nodeName',
                key: 'nodeId',
              }"
            >
              <!-- 自定义图标 -->
              <template slot="custom" slot-scope="{ subNodes }">
                <icon-font
                  :type="subNodes ? 'icon-wenjianjia-' : 'icon-a-moxing1'"
                />
              </template>
              <template slot="title" slot-scope="{ nodeName }">
                <span :title="nodeName">
                  {{ nodeName }}
                </span>
              </template>
            </a-tree>
          </a-spin>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { addAttributeByKey, flatTreeData } from "@/utils/util.js";
import cloneDeep from "lodash.clonedeep";
import { Icon } from "ant-design-vue";
import iconfrontjs from "@/assets/IconFont/iconfont.js";
const iconFrontUrl = iconfrontjs;
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: iconFrontUrl,
});
import { getModelTreeList, dataSetFileTreeNodes } from "@/api/bim";

export default {
  name: "modelListDrawer",
  inject: ["currentProject"],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    IconFont,
  },
  data() {
    return {
      keyWord: "",
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      treeData: [],
      spinning: false,
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.$nextTick((_) => {
            this.getData();
          });
        }
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    //请求属性数据
    getData() {
      this.spinning = true;
      return new Promise((resolve, reject) => {
        let { foreignUuid } = this.currentProject();
        if (!foreignUuid) {
          return;
        }
        getModelTreeList({ projId: foreignUuid })
          .then((res) => {
            let tree = res?.data ?? [];
            let cloneData = cloneDeep(tree);
            let filterData = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              cloneData,
              "subNodes"
            );
            this.treeData = filterData;
            resolve();
          })
          .catch((_) => {
            this.treeData = [];
            reject();
          })
          .finally((_) => {
            this.spinning = false;
          });
      });
    },
    //查询子节点数据
    onLoadData(treeNode) {
      return new Promise((resolve, reject) => {
        let { dataSetId, subNodes = [] } = treeNode.dataRef;
        if (dataSetId && subNodes.length == 0) {
          this.getChildrenData(dataSetId)
            .then((res) => {
              let tree = res?.data ?? [];
              let filterData = addAttributeByKey(
                null,
                "scopedSlots",
                { icon: "custom" },
                tree,
                "subNodes"
              );
              treeNode.dataRef.subNodes = filterData;
              this.treeData = [...this.treeData];
              resolve();
            })
            .catch((_) => {
              reject();
            });
        } else {
          resolve();
        }
      });
    },
    getChildrenData(dataSetId = "") {
      if (!dataSetId) {
        return;
      }
      return new Promise((resolve, reject) => {
        dataSetFileTreeNodes({ dataSetId })
          .then((res) => {
            resolve(res);
          })
          .catch((_) => {
            reject();
          });
      });
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCheck(checkedKeys) {
      this.checkedKeys = checkedKeys;
    },
    onSelect(selectedKeys, info) {
      this.selectedKeys = selectedKeys;
      let { dataSetId, subNodes = [] } = info.node.dataRef;
    },

    //过滤树形数据
    filterTreeData() {
      let { keyWord, treeData } = this;
      if (keyWord.trim() == "") {
        return;
      }
      let flatData = flatTreeData(treeData, "subNodes");
      let result = flatData.filter((v) => v.nodeName.includes(keyWord));
      this.expandedKeys = result.map((v) => v.nodeId);
      this.selectedKeys = result.map((v) => v.nodeId);
      this.checkedKeys = result.map((v) => v.nodeId);
    },

    handleClose() {
      this.$emit("update:visible", false);
      this.$emit("close", false);
    },
  },
};
</script>
<style lang="less" scoped>
.modelListDrawer-container {
  position: absolute;
  width: 300px;
  height: 100%;
  top: 0;
  pointer-events: none;
  transition: 0.3s;
  left: 10px;
  box-sizing: border-box;
  padding: 16px 0 96px 0;
  &.hide {
    left: -100%;
  }
  .modelListDrawer-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 6px;
    pointer-events: all;
    .header {
      flex-shrink: 0;
      height: 36px;
      background: #f0f0f0;
      border-radius: 6px 6px 0px 0px;
      border: 1px solid #d9d9d9;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 16px;
      font-size: 16px;
      color: #333333;
      position: relative;
      .anticon-close {
        color: #8c8c8c;
        font-size: 15px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
      }
    }
    .body {
      flex: 1;
      background: #fff;
      padding: 0 0 10px 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .search-condition {
        flex-shrink: 0;
        padding: 16px 16px 4px 16px;
        position: relative;
        input {
          padding-right: 36px;
        }
        .anticon {
          color: #8c8c8c;
          position: absolute;
          right: 28px;
          font-size: 20px;
          cursor: pointer;
          top: 20px;
        }
      }
      .tree-container {
        flex: 1;
        padding: 0 10px;
        overflow: auto;
        overflow-x: hidden;
        position: relative;
        /deep/.ant-tree {
          li {
            width: 100%;
            .ant-tree-node-content-wrapper {
              position: relative;
              width: calc(100% - 34px);
              .ant-tree-iconEle {
                color: #f3ab1f;
                font-size: 16px;
              }
              .ant-tree-title {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display: inline-block;
                max-width: calc(100% - 40px);
              }
            }
          }
        }
        /deep/.ant-empty {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
}
</style>
